<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>教学管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
            rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#165DFF",
                        secondary: "#36CFC9",
                        success: "#52C41A",
                        warning: "#FAAD14",
                        danger: "#FF4D4F",
                        info: "#8C8C8C",
                        "bg-light": "#F5F7FA",
                        "bg-dark": "#1D2129",
                    },
                    fontFamily: {
                        inter: ["Inter", "system-ui", "sans-serif"],
                    },
                    boxShadow: {
                        card: "0 4px 20px rgba(0, 0, 0, 0.08)",
                        "card-hover": "0 8px 30px rgba(0, 0, 0, 0.12)",
                        nav: "0 4px 20px rgba(0, 0, 0, 0.05)",
                    },
                    animation: {
                        gradient: "gradient 6s linear infinite",
                        float: "float 6s ease-in-out infinite",
                        "fade-in": "fadeIn 0.5s ease-in-out",
                        "slide-up": "slideUp 0.5s ease-out",
                    },
                    backgroundImage: {
                        "gradient-primary":
                            "linear-gradient(45deg, var(--tw-gradient-from), var(--tw-gradient-to))",
                    },
                },
            },
        };
    </script>

    <style type="text/tailwindcss">
        @layer utilities {

            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }

        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body
        class="font-inter bg-bg-light dark:bg-bg-dark transition-colors duration-300"
>
<div id="app">
    <!-- 顶部导航栏 -->
    <navigation></navigation>

    <!-- 侧边栏 -->
    <sidebar></sidebar>

    <!-- 遮罩层 -->
    <div
            id="overlay"
            class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:hidden"
    ></div>

    <!-- 主内容区 -->
    <main class="pt-16 lg:pl-64 min-h-screen">
        <div class="container mx-auto px-6 py-8">
            <div class="animate-fade-in">
                <!-- 欢迎区域和时间显示 -->
                <div
                        class="bg-white dark:bg-gray-800 rounded-2xl p-6 mb-6 shadow-card"
                >
                    <div
                            class="flex flex-col md:flex-row md:items-center md:justify-between"
                    >
                        <div>
                            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">
                                欢迎回来，管理员
                            </h2>
                            <p
                                    class="text-gray-600 dark:text-gray-400 mt-1"
                                    id="currentDateTime"
                            ></p>
                        </div>
                    </div>
                </div>

                <!-- 核心统计数据卡片 -->
                <div
                        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
                >
                    <div
                            class="bg-gradient-to-br from-primary to-primary/80 rounded-2xl p-6 text-white shadow-lg"
                    >
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-white/80">学生总数</p>
                                <h3 class="text-4xl font-bold mt-1">1,280</h3>
                                <p class="text-sm mt-2">
                                    较上学期 <span class="font-medium">+120</span>
                                </p>
                            </div>
                            <div class="p-3 bg-white/10 rounded-xl">
                                <i class="fa fa-users text-2xl"></i>
                            </div>
                        </div>
                    </div>

                    <div
                            class="bg-gradient-to-br from-secondary to-secondary/80 rounded-2xl p-6 text-white shadow-lg"
                    >
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-white/80">课程总数</p>
                                <h3 class="text-4xl font-bold mt-1">86</h3>
                                <p class="text-sm mt-2">
                                    本学期 <span class="font-medium">42</span> 门
                                </p>
                            </div>
                            <div class="p-3 bg-white/10 rounded-xl">
                                <i class="fa fa-book text-2xl"></i>
                            </div>
                        </div>
                    </div>

                    <div
                            class="bg-gradient-to-br from-success to-success/80 rounded-2xl p-6 text-white shadow-lg"
                    >
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-white/80">教师总数</p>
                                <h3 class="text-4xl font-bold mt-1">64</h3>
                                <p class="text-sm mt-2">
                                    教授 <span class="font-medium">18</span> 人
                                </p>
                            </div>
                            <div class="p-3 bg-white/10 rounded-xl">
                                <i class="fa fa-chalkboard-teacher text-2xl"></i>
                            </div>
                        </div>
                    </div>

                    <div
                            class="bg-gradient-to-br from-warning to-warning/80 rounded-2xl p-6 text-white shadow-lg"
                    >
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-white/80">毕业率</p>
                                <h3 class="text-4xl font-bold mt-1">92.5%</h3>
                                <p class="text-sm mt-2">
                                    较去年 <span class="font-medium">+3.2%</span>
                                </p>
                            </div>
                            <div class="p-3 bg-white/10 rounded-xl">
                                <i class="fa fa-graduation-cap text-2xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 图表和数据展示区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <!-- 学生人数趋势 -->
                    <div
                            class="bg-white dark:bg-gray-800 rounded-2xl shadow-card p-6"
                    >
                        <div class="flex items-center justify-between mb-6">
                            <h3
                                    class="text-lg font-semibold text-gray-800 dark:text-white"
                            >
                                GPA分数分布
                            </h3>
                            <div class="flex space-x-2">
                                <button
                                        class="px-3 py-1 text-sm rounded-lg bg-primary/10 text-primary"
                                >
                                    本学期
                                </button>
                                <button
                                        class="px-3 py-1 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300"
                                >
                                    上学期
                                </button>
                            </div>
                        </div>
                        <div class="h-80">
                            <canvas id="gpaDistributionChart"></canvas>
                        </div>
                    </div>

                    <!-- 课程分类统计 -->
                    <div
                            class="bg-white dark:bg-gray-800 rounded-2xl shadow-card p-6"
                    >
                        <div class="flex items-center justify-between mb-6">
                            <h3
                                    class="text-lg font-semibold text-gray-800 dark:text-white"
                            >
                                课程分类统计
                            </h3>
                            <button
                                    class="text-primary hover:text-primary/80 text-sm font-medium"
                            >
                                查看详情
                            </button>
                        </div>
                        <div class="h-80">
                            <canvas id="courseCategoryChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 最新动态 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 待处理任务 -->
                    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-card">
                        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <h3
                                        class="text-lg font-semibold text-gray-800 dark:text-white"
                                >
                                    待处理任务
                                </h3>
                                <span
                                        class="px-3 py-1 text-xs rounded-full bg-primary/10 text-primary"
                                >8 个待处理</span
                                >
                            </div>
                        </div>
                        <div class="p-6 space-y-4">
                            <div
                                    class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl"
                            >
                                <div
                                        class="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary"
                                >
                                    <i class="fa fa-code text-xl"></i>
                                </div>
                                <div class="ml-4 flex-1">
                                    <h4
                                            class="text-sm font-medium text-gray-800 dark:text-white"
                                    >
                                        毕业设计选题审核
                                    </h4>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        12名学生的毕业设计选题需要审核
                                    </p>
                                </div>
                                <button
                                        class="px-3 py-1 text-xs rounded-lg bg-primary text-white hover:bg-primary/90"
                                >
                                    审核
                                </button>
                            </div>

                            <div
                                    class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl"
                            >
                                <div
                                        class="flex-shrink-0 w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center text-warning"
                                >
                                    <i class="fa fa-exclamation-triangle text-xl"></i>
                                </div>
                                <div class="ml-4 flex-1">
                                    <h4
                                            class="text-sm font-medium text-gray-800 dark:text-white"
                                    >
                                        课程评估反馈
                                    </h4>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        需要对人工智能课程评估结果进行处理
                                    </p>
                                </div>
                                <button
                                        class="px-3 py-1 text-xs rounded-lg bg-primary text-white hover:bg-primary/90"
                                >
                                    处理
                                </button>
                            </div>

                            <div
                                    class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl"
                            >
                                <div
                                        class="flex-shrink-0 w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center text-success"
                                >
                                    <i class="fa fa-check-circle text-xl"></i>
                                </div>
                                <div class="ml-4 flex-1">
                                    <h4
                                            class="text-sm font-medium text-gray-800 dark:text-white"
                                    >
                                        科研项目验收
                                    </h4>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        需要对计算机视觉实验室项目进行验收
                                    </p>
                                </div>
                                <button
                                        class="px-3 py-1 text-xs rounded-lg bg-primary text-white hover:bg-primary/90"
                                >
                                    验收
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 系统公告 -->
                    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-card">
                        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <h3
                                        class="text-lg font-semibold text-gray-800 dark:text-white"
                                >
                                    学院公告
                                </h3>
                                <button
                                        class="text-primary hover:text-primary/80 text-sm font-medium"
                                >
                                    全部公告
                                </button>
                            </div>
                        </div>
                        <div class="p-6 space-y-4">
                            <div class="flex items-start space-x-4">
                                <div
                                        class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center"
                                >
                                    <i class="fa fa-bullhorn text-primary"></i>
                                </div>
                                <div>
                                    <h4
                                            class="text-sm font-medium text-gray-800 dark:text-white"
                                    >
                                        学术讲座通知
                                    </h4>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        微软亚洲研究院将举办"人工智能前沿技术"学术讲座
                                    </p>
                                    <p class="text-xs text-gray-400 mt-2">2025-05-20 14:00</p>
                                </div>
                            </div>

                            <div class="flex items-start space-x-4">
                                <div
                                        class="flex-shrink-0 w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center"
                                >
                                    <i class="fa fa-calendar text-warning"></i>
                                </div>
                                <div>
                                    <h4
                                            class="text-sm font-medium text-gray-800 dark:text-white"
                                    >
                                        课程调整通知
                                    </h4>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        由于教师出差，"高级算法设计"课程第12周课程调整
                                    </p>
                                    <p class="text-xs text-gray-400 mt-2">2025-05-18 16:30</p>
                                </div>
                            </div>

                            <div class="flex items-start space-x-4">
                                <div
                                        class="flex-shrink-0 w-10 h-10 rounded-full bg-success/10 flex items-center justify-center"
                                >
                                    <i class="fa fa-check-circle text-success"></i>
                                </div>
                                <div>
                                    <h4
                                            class="text-sm font-medium text-gray-800 dark:text-white"
                                    >
                                        科研成果发布
                                    </h4>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        我院人工智能团队在顶级会议发表多篇高质量论文
                                    </p>
                                    <p class="text-xs text-gray-400 mt-2">2025-05-16 10:45</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
</body>
<script src="/static/js/top.js"></script>
<script src="/static/js/aside.js"></script>
<script>
     // Vue 实例
    new Vue({
        el: "#app",
        data: {
            // 这里可以添加数据属性
        },
        methods: {
            // 这里可以添加方法
        },
    });
</script>
<script>
    // 等待DOM完全加载后执行
    document.addEventListener("DOMContentLoaded", function () {
        // 更新当前时间
        function updateDateTime() {
            const now = new Date();
            const options = {
                weekday: "long",
                year: "numeric",
                month: "long",
                day: "numeric",
                hour: "2-digit",
                minute: "2-digit",
            };
            const currentDateTimeElement =
                document.getElementById("currentDateTime");
            if (currentDateTimeElement) {
                currentDateTimeElement.textContent = now.toLocaleDateString(
                    "zh-CN",
                    options
                );
            }
        }

        // 初始化时间显示并每分钟更新
        updateDateTime();
        setInterval(updateDateTime, 60000);

        // 侧边栏切换
        const sidebarToggle = document.getElementById("sidebar-toggle");
        const sidebar = document.getElementById("sidebar");
        const overlay = document.getElementById("overlay");

        if (sidebarToggle && sidebar && overlay) {
            sidebarToggle.addEventListener("click", () => {
                sidebar.classList.toggle("-translate-x-full");
                overlay.classList.toggle("hidden");
            });

            overlay.addEventListener("click", () => {
                sidebar.classList.add("-translate-x-full");
                overlay.classList.add("hidden");
            });
        }

        // 图表初始化
        const chartTextColor = "#4E5969";
        const gridColor = "rgba(0, 0, 0, 0.05)";

        // GPA分布图表
        const gpaCtx = document.getElementById("gpaDistributionChart");
        if (gpaCtx) {
            const gpaDistributionChart = new Chart(gpaCtx, {
                type: "bar",
                data: {
                    labels: [
                        "0-1.0",
                        "1.0-1.5",
                        "1.5-2.0",
                        "2.0-2.5",
                        "2.5-3.0",
                        "3.0-3.5",
                        "3.5-4.0",
                        "4.0-4.5",
                        "4.5-5.0",
                    ],
                    datasets: [
                        {
                            label: "学生人数",
                            data: [5, 12, 25, 48, 86, 120, 95, 42, 15],
                            backgroundColor: "rgba(22, 93, 255, 0.8)",
                            borderColor: "rgba(22, 93, 255, 1)",
                            borderWidth: 1,
                            borderRadius: 4,
                            barPercentage: 0.8,
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            grid: {
                                display: false,
                            },
                            title: {
                                display: true,
                                text: "GPA分数区间",
                                color: chartTextColor,
                                font: {
                                    size: 12,
                                    weight: "normal",
                                },
                            },
                            ticks: {
                                color: chartTextColor,
                                font: {
                                    size: 11,
                                },
                            },
                        },
                        y: {
                            grid: {
                                color: gridColor,
                                drawBorder: false,
                            },
                            title: {
                                display: true,
                                text: "学生人数",
                                color: chartTextColor,
                                font: {
                                    size: 12,
                                    weight: "normal",
                                },
                            },
                            ticks: {
                                color: chartTextColor,
                                font: {
                                    size: 11,
                                },
                                stepSize: 20,
                            },
                        },
                    },
                    plugins: {
                        legend: {
                            display: false,
                        },
                        tooltip: {
                            callbacks: {
                                title: function (context) {
                                    return "GPA: " + context[0].label;
                                },
                                label: function (context) {
                                    return "学生人数: " + context.parsed.y + "人";
                                },
                            },
                        },
                    },
                },
            });
        }

        // 课程分类统计图表
        const courseCategoryCtx = document.getElementById(
            "courseCategoryChart"
        );
        if (courseCategoryCtx) {
            const courseCategoryChart = new Chart(courseCategoryCtx, {
                type: "doughnut",
                data: {
                    labels: [
                        "专业基础课",
                        "专业核心课",
                        "专业选修课",
                        "公共基础课",
                        "实践课程",
                    ],
                    datasets: [
                        {
                            data: [22, 18, 26, 12, 8],
                            backgroundColor: [
                                "rgba(22, 93, 255, 0.8)",
                                "rgba(54, 207, 201, 0.8)",
                                "rgba(82, 196, 26, 0.8)",
                                "rgba(250, 173, 20, 0.8)",
                                "rgba(255, 77, 79, 0.8)",
                            ],
                            borderWidth: 0,
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: "70%",
                    plugins: {
                        legend: {
                            position: "bottom",
                            labels: {
                                color: chartTextColor,
                                padding: 20,
                                font: {
                                    size: 12,
                                },
                            },
                        },
                    },
                },
            });
        }
    });
</script>
</html>
